import { defineComponent, ref } from 'vue'
import { Tabbar, TabbarItem } from 'vant';
import { useRouter, useRoute, RouterView } from "vue-router";

const TabsContainer = defineComponent({
    name: 'TabsContainer',
    setup() {
        const tabsList = [{
            icon: "wap-home",
            text: "首页",
            pathName: "home"
        }, {
            icon: "wap-nav",
            text: "分类",
            pathName: "classification"
        }, {
            icon: "shopping-cart",
            text: "购物车",
            pathName: "shoppingcart"
        }, {
            icon: "manager",
            text: "我的",
            pathName: "usercenter"
        }]
        const router = useRouter();
        const active = ref(0);
        const changeTabs = (index: number) => {
            const { pathName } = tabsList[index];
            router.push({
                name: pathName
            })
        }
        return () => (
            <>
                <div>
                    <Tabbar v-model={active.value} onChange={changeTabs}>
                        {
                            tabsList.map(item =>
                                <TabbarItem
                                    icon={item.icon}
                                    key={item.pathName}>{item.text}</TabbarItem>)
                        }
                    </Tabbar>
                    <div class="tabs-page-container">
                        <router-view />
                    </div>
                </div>
            </>
        )
    },
})
export default TabsContainer
